<template>
  <v-scale-screen
    :delay="0"
    :box-style="{
      backgroundColor: '#051735',
    }"
  >
    <div class="srceen-box-bg">
      <Page-title :interval="interval" back />
      <div class="capacity m20">
        <div class="capacity-title font32">产能信息——{{ queryParams.value }}</div>
        <Selector
          :current="queryParams.dateType"
          :list="typeList"
          :top="50"
          :right="30"
          @change="chnageType"
        />
        <div id="capacity-info" />
      </div>
    </div>
  </v-scale-screen>
</template>
<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
import { capacityWorkshopDetails } from "@/api/srceen/home";
export default {
  data() {
    return {
      queryParams: {
        dateType: "DAY", // 类型
        value: "",
      },
      typeList: [
        { label: "日", value: "DAY" },
        { label: "周", value: "WEEK" },
        { label: "月", value: "MONTH" },
      ],
      xlist: [],
      dataList: [],
      colors: [
        ["#30C27C", "#272b35"],
        ["#feff55", "#feff55"],
        ["#feff55", "#feff55"],
      ],
    };
  },
  computed: {
    ...mapState({
      interval: (state) => state.app.srceenDelay,
      refresh: (state) => state.app.refresh,
    }),
  },
  watch: {
    refresh() {
      this.getList();
    },
  },
  mounted() {
    const { name } = this.$route.query;
    if (name) this.queryParams.value = decodeURIComponent(name);
    this.getList();
  },
  methods: {
    // 切换类型
    chnageType(val) {
      this.queryParams.dateType = val.value;
      this.getList();
    },
    // 获取图表数据
    getList() {
      capacityWorkshopDetails(this.queryParams).then((res) => {
        if (res.data) {
          this.xlist = res.data.xaxis;
          this.dataList = [
            {
              data: res.data.actual || [],
              name: "实际累计",
              type: "bar",
              pos: "top",
            },
            {
              data: res.data.target || [],
              name: "目标",
              type: "line",
              pos: "top",
            },
          ];
          this.initChart();
        }
      });
    },
    initChart() {
      let domid = document.getElementById("capacity-info");
      if (domid?.hasAttribute("_echarts_instance_"))
        domid.removeAttribute("_echarts_instance_");
      let myChart = this.$echarts.init(domid);
      let legData = [];
      let series = [];
      this.dataList.forEach((item, index) => {
        legData.push({
          name: item.name,
          itemStyle: { opacity: item.type === "line" ? 0 : 1 },
        });
        let itemObj = {
          data: item.data,
          type: item.type,
          name: item.name,
          smooth: true,
          symbol: item.type === "line" ? "diamond" : "rect",
          barGap: "-100%",
          barWidth: "20%",
          label: {
            show: item.pos ? true : false,
            position: item.pos,
            fontSize: 12,
            formatter: "{c}",
            color: index == 0 ? "#fff" : "#FFFE54",
          },
          itemStyle: {
            color: (e) => {
              let colorItem = this.colors[index];
              if (
                index === 0 &&
                item.data[e.dataIndex] < this.dataList[1].data[e.dataIndex]
              ) {
                colorItem = ["#F63F3F", "#262A34"];
              }
              return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: colorItem[0] },
                  { offset: 1, color: colorItem[1] },
                ],
                false
              );
            },
          },
        };
        series.push(itemObj);
        if (index == 0) {
          let itemTop = {
            data: item.data,
            type: "pictorialBar",
            name: "",
            symbol:
              "image://",
            symbolSize:
              this.queryParams.dateType == "DAY"
                ? [20, 6]
                : this.queryParams.dateType == "WEEK"
                ? [46, 6]
                : [30, 6],
            symbolOffset: [0, -3],
            symbolPosition: "end",
            z: 12,
            label: {
              show: false,
            },
          };
          series.push(itemTop);
        }
      });
      let nulldata = [];
      this.xlist.forEach(() => {
        nulldata.push(0);
      });
      series.push({
        type: "custom",
        itemStyle: {
          borderWidth: 1,
          borderColor: "#373D4B",
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#282c37" },
              { offset: 1, color: "#1c202b" },
            ],
          },
        },
        data: nulldata,
        z: 1,
        renderItem: (params, api) => {
          var start = api.coord([api.value(0)]);
          var width = (params.coordSys.width / this.xlist.length) * 0.5;
          return {
            type: "rect",
            shape: {
              x: start[0] - width / 2,
              y: params.coordSys.y,
              width: width,
              height: params.coordSys.height,
            },
            style: api.style(),
          };
        },
      });
      let color = [];
      this.colors.forEach((i) => {
        color.push({
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: i[0] },
            { offset: 1, color: i[1] },
          ],
          global: false,
        });
      });
      let option = {
        color: color,
        grid: {
          top: "20%",
          left: "3%",
          right: "3%",
          bottom: "8%",
          containLabel: true,
        },
        tooltip: {
          show: false,
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
        },
        legend: {
          show: true,
          itemWidth: 14,
          itemHeight: 14,
          data: legData,
          left: "10%",
          top: "8%",
          textStyle: { color: "#fff" },
        },
        xAxis: {
          type: "category",
          data: this.xlist,
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          axisLine: {
            show: false,
            lineStyle: { color: "#5a718b" },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
        },
        yAxis: {
          show: this.dataList.length > 0,
          type: "value",
          name: "平方米",
          offset: 20,
          nameGap: 10,
          nameLocation: "start",
          nameTextStyle: {
            fontSize: 12,
            color: "#DFEFFF",
            align: "right",
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              fontSize: 14,
              color: "#fff",
            },
          },
        },
        series: series,
      };
      myChart.setOption(option, true, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.srceen-box-bg {
  height: 100%;
  width: 100%;
  background: url("~@/assets/img/bg.png");
  .capacity {
    width: 1880px;
    height: 902px;
    background: url("../../../assets/img/bg2.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    #capacity-info {
      width: 100%;
      height: 100%;
    }
    .capacity-title {
      font-family: YouSheiBlack;
      color: #45f4ff;
      position: absolute;
      left: 50%;
      top: -20px;
      transform: translateX(-50%);
    }
  }
}
</style>
